<?php
$now_title = "产品中心";
require_once ('head.php');
?>
<style type="text/css">

    .c-banner{
    width: 60%;
    position: relative;
    margin: auto;
}
.c-banner img{
    width: 100%;
}
.c-banner .banner ul{
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}
.c-banner .banner ul li{
    position: absolute
    display: none;
    opacity: 0;
}
.c-banner .banner ul li:nth-child(1){
    opacity: 1;
    display: block;
}
.c-banner .banner ul li img{
    width: 100%;
    position: absolute;
    top: 0px;
}
.c-banner .banner ul li:first-child img{
    position: relative;
}
.c-banner .nexImg,.c-banner .preImg{
    padding: 25px 10px 25px 10px;
    position: absolute;
    top: 50%;
    margin-top: -53px;
    background: #3487E6;
    opacity: 0.4;
    border-radius: 5px;
    z-index: 10;
    
}
.c-banner .nexImg:hover,.c-banner .preImg:hover{
    opacity: 0.8;
}
.c-banner .nexImg{
    right: 0px;
}
.c-banner .nexImg img,.c-banner .preImg img{
    
    
}
.c-banner .jumpBtn{
    width: 100%;
    position: absolute;
    bottom: 20px;
    text-align: center;
}
.c-banner .jumpBtn ul{
    margin-bottom: 0px;
    padding: 0px;
}

.c-banner .jumpBtn ul li{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    background-color: white;
    opacity: 0.9;
    margin-left: 10px;
}
.c-banner .jumpBtn ul li:first-child{
    margin-left: 0px;
}
@media screen and (max-width:768px) {
    .c-banner{
        width: 100%;
        height: 345px;
        overflow: hidden;
    }
    .c-banner .banner ul li img{
        width: 768px;
        height: 345px;
        position: absolute;
        left: 50%;
        margin-left: -384px;
    }
}

@media screen and (min-width:768px) {
        .mh{
            min-height:1015px;
        }
        

}

@media screen and (min-width:1900px) {
        .mh{
            min-height:1120px;
        }
        

}
</style>
            <?php
            $type = isset($_GET['cid'])?(int)$_GET['cid']:23;
            $typearray = [];
            $dosql->Execute("SELECT * FROM `#@__infoclass` WHERE parentid=5   AND checkinfo=true order by orderid ASC ");
            while ($row = $dosql->GetArray()){
                $typearray[$row['id']] = $row['classname'];
            }
                $id = isset($_GET['id'])?$_GET['id']:0;
                //检测文档正确性
                $row = $dosql->GetOne("SELECT * FROM `#@__infoimg` WHERE id=$id");
                if(!is_array($row)) {
                    $row = [];
                }

                
                $picarr=unserialize($row['picarr']);


                //print_r($picarr);
             ?>


        <div class="container " style="overflow: hidden;">
        <div style="border-bottom: 3px solid #3487E6; margin-top: 3%; padding-bottom: 2%; color: #262626">
            
            <span class="">

                <a href="/">网站首页</a>
                &gt;
                <a href="">产品中心</a>
                &gt;
                <a href=""> <?php echo $row['title'] ?></a>
                
             </span>
        </div>

    </div>
    <div id="in_box5" class="mt-5" style="overflow: hidden;">


        <div class="container newone">
            <?php require_once('left.php');?>

            <div class="mainright" style=" ">

            <div style=" background-image: url('img/cpbj.jpg'); background-color: #fff; padding: 5% 2% ;" class="mh">
                 <h1 style="text-align: center;">   <?php echo $row['title'] ?></h1>

                  <br>
                  <br>
                 
<?if($picarr){ ?>
  <div class="c-banner">
    <div class="banner">
        <ul>
        <?php foreach ($picarr as $key => $value) {
          echo ' <li><img src="'.str_replace(',','',$value).'"></li>';
        } ?>
        </ul>
    </div>
    <div class="nexImg">
        <img src="img/nexImg.png" />
    </div>
    <div class="preImg">
        <img src="img/preImg.png" />
    </div>

</div>
<?php }else{ ?>
<p style="text-align: center; max-width:40%; margin: auto; margin-bottom: 5%;" >
                     <img  src="<?php echo $row['picurl'] ?>" alt="">

                 </p>


<?php } ?>
                 <p>
                     <?php echo $row['content']; ?>

                 </p>
                 <p>
                     


                 </p>
            </div>

        
            </div>
        </div>


    </div>



<?php require_once("footer.php");?>

<script type="text/javascript">
//定时器返回值
var time=null;
//记录当前位子
var nexImg = 0;
//用于获取轮播图图片个数
var imgLength = $(".c-banner .banner ul li").length;
//当时动态数据的时候使用,上面那个删除
// var imgLength =0;
//设置底部第一个按钮样式
$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");

//页面加载
$(document).ready(function(){
    // dynamicData();
    //启动定时器,设置时间为3秒一次
    time =setInterval(intervalImg,3000);
});

//点击上一张
$(".preImg").click(function(){
    //清楚定时器
    clearInterval(time);
    var nowImg = nexImg;
    nexImg = nexImg-1;
    console.log(nexImg);
    if(nexImg<0){
        nexImg=imgLength-1;
    }
    //底部按钮样式设置
    $(".c-banner .jumpBtn ul li").css("background-color","white");
    $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
    
    //将当前图片试用绝对定位,下一张图片试用相对定位
    $(".c-banner .banner ul img").eq(nowImg).css("position","absolute");
    $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
    
    //轮播淡入淡出
    $(".c-banner .banner ul li").eq(nexImg).css("display","block");
    $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
    $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){
        $(".c-banner ul li").eq(nowImg).css("display","none");
    });
    
    //启动定时器,设置时间为3秒一次
    time =setInterval(intervalImg,3000);
})

//点击下一张
$(".nexImg").click(function(){
    clearInterval(time);
    intervalImg();
    time =setInterval(intervalImg,3000);
})

//轮播图
function intervalImg(){
    if(nexImg<imgLength-1){
        nexImg++;
    }else{
        nexImg=0;
    }
    
    //将当前图片试用绝对定位,下一张图片试用相对定位
    $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute");
    $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
    
    $(".c-banner .banner ul li").eq(nexImg).css("display","block");
    $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
    $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){
        $(".c-banner .banner ul li").eq(nexImg-1).css("display","none");
    });
    $(".c-banner .jumpBtn ul li").css("background-color","white");
    $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
}

//轮播图底下按钮
//动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用
$(".c-banner .jumpBtn ul li").each(function(){
    //为每个按钮定义点击事件
    $(this).click(function(){
        clearInterval(time);
        $(".c-banner .jumpBtn ul li").css("background-color","white");
        jumpImg = $(this).attr("jumpImg");
        if(jumpImg!=nexImg){
            var after =$(".c-banner .banner ul li").eq(jumpImg);
            var befor =$(".c-banner .banner ul li").eq(nexImg);
            
            //将当前图片试用绝对定位,下一张图片试用相对定位
            $(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
            $(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
            
            after.css("display","block");
            after.stop().animate({"opacity":1},1000);
            befor.stop().animate({"opacity":0},1000,function(){
                befor.css("display","none");
            });
            nexImg=jumpImg;
        }
        $(this).css("background-color","black");
        time =setInterval(intervalImg,3000);
    });
});

    //动态数据轮播图
    //动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据
// function dynamicData(){
//  $.ajax({
//      url:"js/test.json",
//      type:"get",
//      dataType:"json",
//      success:function(data){
//          if(data.code==1){
//              var data = data.data;
//              $.each(data,function(i){
//                  $(".c-banner .banner ul").append('<li><img src="'+this.img+'"></li>');
//                  $(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>')
//              })
//          }
//          //获取图片总数量
//          imgLength = $(".c-banner .banner ul li").length;
//          //为底部按钮定义单击事件
//          $(".c-banner .jumpBtn ul li").each(function(){
//              //为每个按钮定义点击事件
//              $(this).click(function(){
//                  clearInterval(time);
//                  $(".c-banner .jumpBtn ul li").css("background-color","white");
//                  jumpImg = $(this).attr("jumpImg");
//                  if(jumpImg!=nexImg){
//                      var after =$(".c-banner .banner ul li").eq(jumpImg);
//                      var befor =$(".c-banner .banner ul li").eq(nexImg);
//                      
//                      //将当前图片试用绝对定位,下一张图片试用相对定位
//                      $(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
//                      $(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
//                      
//                      after.css("display","block");
//                      after.stop().animate({"opacity":1},1000);
//                      befor.stop().animate({"opacity":0},1000,function(){
//                          befor.css("display","none");
//                      });
//                      nexImg=jumpImg;
//                  }
//                  $(this).css("background-color","black");
//                  time =setInterval(intervalImg,3000);
//              });
//          });
//      }
//  })
// }
</script>